<template>
	<el-sub-menu
		v-if="menu.children && menu.children.length > 0"
		:key="menu.path"
		:index="$localePath(menu.path)"
	>
		<template #title>
			<svg-icon :name="menu.meta.icon"></svg-icon>
			<span>{{ getTitle(menu.meta) }}</span>
		</template>
		<menu-item
			v-for="sub in menu.children"
			:key="sub.path"
			:menu="sub"
		></menu-item>
	</el-sub-menu>
	<el-menu-item
		v-else
		:key="menu.path"
		:index="$localePath(menu.path)"
	>
		<svg-icon :name="menu.meta.icon"></svg-icon>
		<template #title>{{ getTitle(menu.meta) }}</template>
	</el-menu-item>
</template>

<script setup lang="ts">
import { useI18n } from '#imports';
import type { PropType } from 'vue';

const appStore = useStore.appStore();
const { locale } = useI18n();

defineProps({
	menu: {
		type: Object as PropType<any>,
		required: true
	}
})

const getTitle = (meta: any) => {
	return getLocaleTitle(locale.value, meta)
}
</script>
